import React, { useEffect, useState } from "react";
import { ArrowLeftOutlined, SearchOutlined } from "@ant-design/icons";
import { Input } from "antd";
import { Searchwrap } from "./styled";

import Vocabulary from "./components/vocabulary";
import Searchresult from "./components/searchresult";
import Mod from "@/pages/Homepage/components/mod";
import Routertran from "@/components/routertran";
import { getessayanyway } from "@/apis/essay";

const { Search: Searchcom } = Input;
export interface propsinterface {
  title: string;
  cover: string; //封面
  id: number;
  content: string;
  views: number; //浏览量
  pingluncount: number; //评论数,
  collectcount: number; //收藏数
  updateAt: string;
  iscollect: boolean; //当前用户是否收藏
}
export default function Search() {
  //不同形式的博客，如：热度最高，
  const [hotblog, setHotblog] = useState<propsinterface[]>();
  const [newblog, setNewblog] = useState<propsinterface[]>();
  const [inputv, setInputv] = useState<string>(""); //输入框的内容
  const [searchv, setSearchv] = useState<string>(""); //最终搜索的内容
  useEffect(() => {
    getessayanyway(2).then((res: any) => {
      setHotblog(res.result);
    });
    getessayanyway(1).then((res: any) => {
      setNewblog(res.result);
    });
  }, []);
  //搜索内容改变
  const onChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setInputv(e.target.value);
    if (e.target.value === "") {
      setSearchv("");
    }
  };
  //开始搜索
  const onSearch = (value: string) => {
    setInputv(value);
    setSearchv(value);
  };
  return (
    <Searchwrap>
      <div className="main">
        <div className="left">
          <div className="top">
            <div className="searchinput">
              <div className="top">
                <span>搜索</span>
                <ArrowLeftOutlined
                  onClick={(e) => {
                    setInputv("");
                    setSearchv("");
                  }}
                  className="ArrowLeftOutlined"
                />
              </div>
              <div className="input">
                <Searchcom
                  placeholder="输入关键字"
                  enterButton={<SearchOutlined style={{ fontSize: "18px" }} />}
                  size="large"
                  value={inputv}
                  onChange={onChange}
                  onSearch={onSearch}
                />
              </div>
            </div>
            <div className="content"></div>
          </div>
          <div className="main">
            {searchv === "" ? (
              <Vocabulary onSearch={onSearch}></Vocabulary>
            ) : (
              <Searchresult searchv={searchv}></Searchresult>
            )}
          </div>
        </div>
        <div className="right">
          {newblog && hotblog ? (
            <>
              {/* 最新文章 */}
              <Mod title="最新文章" type={0} typeessay={newblog}></Mod>
              {/* 最热文章 */}
              <Mod title="热度文章" type={1} typeessay={hotblog}></Mod>
            </>
          ) : (
            <Routertran
              width={300}
              height={200}
              left={50}
              top={50}
            ></Routertran>
          )}
        </div>
      </div>
    </Searchwrap>
  );
}
